window.onload = function() {
    const container = document.getElementById("container");
    let slide = new Slider(container);
}

function Slider(container) {
    this.container = container;
    this.list = document.getElementById('list');
    this.buttons = document.getElementById("buttons").getElementsByTagName("span");
    this.prev = document.getElementById("prev");
    this.next = document.getElementById("next");
    this.index = 1;
    this.timer = null;
    this.animated = false;
    this.timmer2 = null;
    let that_ = this;
    this.container.onmouseover = function() {
        clearInterval(that_.timer2);
        that_.animated = false;
    }
    this.container.onmouseleave = function() {
        that_.play();
    }
    this.play();
    this.prev_();
    this.next_();
    this.buttonsClick();
}
Slider.prototype.animate = function(offset) {
    this.animated = true;
    var speed = offset / 30;
    var newLeft = parseInt(this.list.style.left) + offset;
    let that = this;
    var move = function() {
        clearInterval(this.timer);
        if ((speed > 0 && parseInt(this.list.style.left) < newLeft) || (speed < 0 && parseInt(this.list.style.left) > newLeft)) {
            this.list.style.left = parseInt(this.list.style.left) + speed + "px";
            this.timer = setTimeout(move, 10);
        } else {
            that.animated = false;
            if (newLeft > -600) {
                this.list.style.left = -3000 + "px";
            }
            if (newLeft < -3000) {
                this.list.style.left = -600 + "px";
            }
        }
    }
    move();
}
Slider.prototype.play = function() {
    let that = this;
    this.timer2 = setInterval(function() {
        that.auto();
    }, 1000);
}

Slider.prototype.auto = function() {
    this.index = this.index + 1;
    if (this.index > 5) {
        this.index = 1;
    }
    this.animate(-600);
    this.buttonsShow();
}
Slider.prototype.prev_ = function() {
    let that = this;
    this.prev.onclick = function() {
        if (that.animated) {
            return;
        }
        that.index = that.index - 1;
        if (that.index < 1) {
            that.index = 5;
        }
        that.animate(600);
        that.buttonsShow();
    };
}
Slider.prototype.next_ = function() {
    let that = this;
    this.next.onclick = function() {
        if (that.animated) {
            return;
        }
        that.index = that.index + 1;
        if (that.index > 5) {
            that.index = 1;
        }
        that.animate(-600);
        that.buttonsShow();
    };
}
Slider.prototype.buttonsShow = function() {
    for (let i = 0; i < this.buttons.length; i++) {
        if (this.buttons[i].className == "on") {
            this.buttons[i].className = "";
        }
    }
    this.buttons[this.index - 1].className = "on";
}
Slider.prototype.buttonsClick = function() {
    for (var i = 0; i < this.buttons.length; i++) {
        let that = this;
        (function(i) {
            that.buttons[i].onclick = function() {
                var clickIndex = parseInt(that.buttons[i].getAttribute("index"));
                var offset = -600 * (clickIndex - that.index);
                if (that.animated) {
                    return;
                }
                that.animate(offset);
                that.index = clickIndex;
                that.buttonsShow();
            }
        })(i);
    }
}